<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>bootstrap响应式|study</title>
</head>
<body>
    <!-- 头部导航 -->
    <div class="navbar navbar-inverse navbar-static-top my-header">
        <div class="container">
            <!-- 非折叠区 -->
            <div class="navbar-header">
                <a href="#" class="logo navbar-brand"><img class="logo-pic" src="./img/logo.png" alt=""></a>
                <i class="navbar-toggle" data-toggle="collapse" data-target="#mymenu"></i>
            </div>
            <!-- 折叠区 -->
            <div class="collapse navbar-collapse" id="mymenu">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><i class="glyphicon glyphicon-shopping-cart"></i> 小米商城</a></li> 
                        <li><a href="#"><i class="glyphicon glyphicon-phone"></i> MIUI</a></li> 
                        <li><a href="#"><i class="glyphicon glyphicon-send"></i> olT</a></li> 
                        <li><a href="#"><i class="glyphicon glyphicon-cloud-download"></i> 云服务</a></li> 
                        <li><a href="#"><i class="glyphicon glyphicon-usd"></i> 金融</a></li> 
                        <li><a href="#"><i class="glyphicon glyphicon-gift"></i> 有品</a></li> 
                    </ul>
            </div>
        </div>
    </div>

    <!-- 轮播图 -->
    <div id="swiper" class="carousel slide" >
        <!-- slider-item 图片banner -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="./img/swiper01.jpg" alt="">
            </div>
            <div class="item">
                <img src="./img/swiper02.jpg" alt="">
            </div>
            <div class="item">
                <img src="./img/swiper03.jpg" alt="">
            </div>
        </div>
        <!-- 分页器 -->
        <ol class="carousel-indicators">
            <li data-target="#swiper" data-slide-to="0" class="active"></li>
            <li data-target="#swiper" data-slide-to="1"></li>
            <li data-target="#swiper" data-slide-to="2"></li>
        </ol>
        <!-- 左右箭头 -->
        <a href="#swiper" data-slide="prev" class="carousel-control left">
            <i class="glyphicon glyphicon-chevron-left"></i>
        </a>
        <a href="#swiper" data-slide="next" class="carousel-control right">
            <i class="glyphicon glyphicon-chevron-right"></i>
        </a>
    </div>

    <!-- part-01 -->
    <div class="container" id="part-01">
        <h3 class="text-center">hell , 未来</h3>
        <p class="text-center">一切都来自一系列值得深思的问题，现在的电脑是否反而局限了人们的做事方法？电脑究竟应该是什么样子？在今天，越来越多的人喜欢直接在 iOS 设备上，来完成原本用电脑做的事。这，让我们看到了电脑的未来：能用手触控，用键盘输入，用镜头探索世界，用笔写写画画1；既轻便易用，又强大到能随时随地工作、学习、创造，激发你看事做事的新方式。所谓“电脑”，就应该像今天的 iPad 一样。</p>
        <div class="row"></div>
    </div>


    <!-- part-02 -->
    <div id="part-02">
        <div>
            <div class="container">
                <div class="col-md-6 col-sm-6 pic-a">
                    <img src="./img/part02a.png" alt="">
                </div>
                <div class="col-md-6 col-sm-6 text-a">
                    <h3 class="text-center">定制手机</h3>
                    <p id="aaa" class="text-center">拥有双域系统，实现智能管控的政企深度定制的智慧小米手机</p>
                </div>
            </div>
        </div>
        <div>
            <div class="container">
                <div class="col-md-6 col-sm-6 pic-a" id="pic-b">
                    <img src="./img/part02b.png" alt="">
                </div>
                <div class="col-md-6 col-sm-6 text-a" id="text-b">
                    <h3 class="text-center">智能建筑</h3>
                    <p id="aaa" class="text-center">依托米家智能生态硬件产品，创造集智慧、节能、自动化等于一身的生活和工作体验</p>
                </div>
            </div>
        </div>
        <div>
            <div class="container">
                <div class="col-md-6 col-sm-6 pic-a">
                    <img src="./img/part02a.png" alt="">
                </div>
                <div class="col-md-6 col-sm-6 text-a">
                    <h3 class="text-center">物联网通信</h3>
                    <p id="aaa" class="text-center">对接国内外运营商，覆盖多个业务场景，国内增速最快的物联网通信平台</p>
                </div>
            </div>
        </div>
        <div>
            <div class="container">
                <div class="col-md-6 col-sm-6 pic-a" id="pic-b">
                    <img src="./img/part02b.png" alt="">
                </div>
                <div class="col-md-6 col-sm-6 text-a" id="text-b">
                    <h3 class="text-center">智能建筑</h3>
                    <p id="aaa" class="text-center">依托米家智能生态硬件产品，创造集智慧、节能、自动化等于一身的生活和工作体验</p>
                </div>
            </div>
        </div>
    </div>

    <!-- footerr -->
    <footer>
        <div class="container">
            <p class="text-center">小米商城|MIUI|米家|米聊|多看|游戏|路由器|米粉卡|政企服务|小米天猫店|隐私政策|问题反馈|廉正举报|Select Region</p>
            <p class="text-center">©mi.com 京ICP证*******号 京ICP备******号 京公网安备*******号 京网文[2017]1530-131号</p>
            <p class="text-center">这不是小米官网</p>
        </div>
    </footer>
</body>
<!-- 轮播图的js代码 -->
<script src="./js/swiper.js"></script>
<!-- part_01的代码 -->
<script src="./js/part_01.js"></script>
<script>
    // part-02的js代码
    $(function () {
        function center (w) {
            if (w<768) return       // 如果大于768, 给文字部分设置一个margin-top, 让其垂直居中
            let a = $('#part-02>div').height()
            let b = $('#part-02>div .text-a').height()
            let margin_top = (a-b)/2
            $('#part-02>div .text-a').css({'margin-top': `${margin_top}px`})
        }
        let w = $(window).width()
        center(w)
        $(window).resize(()=>{
            let w = $(window).width()
            center(w)
        })
    })

</script>
</html>